import React, { useRef } from "react";
import Rated from "./components/Rated";
import MoviesList from "./components/MoviesList";
import BScroll from "better-scroll";

import "./index.less";

let bs;

const Index = () => {
  const moviesRef = useRef();
  // const [count, setCount] = useState(0);

  const onScroll = () => {
    // console.log("子组件数据请求结束了");
    bs = new BScroll(".main", {
      scrollX: false,
      scrollY: true,
      click: true,
      pullUpLoad: {
        // 阈值
        // 离最下面还有多少像素的时候触发pullingUp
        threshold: 50,
      },
    });

    bs.on("pullingUp", async () => {
      // console.log("我现在拉到底了");
      // setCount((v) => v + 1);
      moviesRef.current.pullUp();
    });
  };

  const onFinishMore = () => {
    bs.refresh();
    bs.finishPullUp();
  };

  return (
    <div className="main">
      <div>
        <Rated />
        <MoviesList
          onScroll={onScroll}
          ref={moviesRef}
          onFinishMore={onFinishMore}
        />
      </div>
    </div>
  );
};

export default Index;
